<!-- categoryList -->
<template>
	<div class="categoryList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/admin/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>分类管理</el-breadcrumb-item>
			<el-breadcrumb-item>分类列表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-table
				:data="categoryList"
				style="width: 100%; margin-bottom: 20px"
				row-key="cid"
				border
				default-expand-all
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			>
				<el-table-column prop="title" label="标题" sortable> </el-table-column>
				<el-table-column label="照片" sortable>
					<template #default="scope">
						<el-avatar
							shape="square"
							:size="50"
							:src="
								scope.row.imgsrc
									? 'http://localhost:8000/' + scope.row.imgsrc
									: defaultImg
							"
						></el-avatar>
					</template>
				</el-table-column>
				<el-table-column label="是否显示">
					<template #default="scope">
						<el-switch
							v-model="scope.row.is_show"
							active-color="#13ce66"
							inactive-color="#ff4949"
							@change="changeIsShow(scope.row.cid, $event)"
						>
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" sortable>
					<template #default="scope">
						{{ scope.row.create_time | dateFmt('YYYY-MM-DD HH:mm:ss') }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template #default="scope">
						<el-button size="mini" @click="handleEdit(scope.row.cid)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.row.cid)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<!-- 修改 -->
		<el-dialog
			:close-on-click-modal="false"
			title="修改分类"
			:visible.sync="editCategoryVisible"
			width="50%"
			:showClose="false"
			@close="clockHandle"
		>
			<el-form
				:model="editCateForm"
				:rules="editCateRules"
				ref="editCateRef"
				status-icon
				label-width="80px"
			>
				<el-form-item label="分类" prop="pid">
					<el-cascader
						:options="categoryList"
						:props="cascaderProp"
						clearable
						@change="cascaderChange"
						v-model="editCateForm.pid"
					></el-cascader>
				</el-form-item>
				<el-form-item label="标题" prop="title">
					<el-input v-model="editCateForm.title"></el-input>
				</el-form-item>
				<el-form-item label="图片">
					<el-upload
						class="avatar-uploader"
						action="http://localhost:8000/api/utils/upload/"
						name="avatar"
						:limit="1"
						ref="cateUploadRef"
						:on-success="handleAvatarSuccess"
						:on-remove="handleAvatarRemove"
					>
						<img
							v-if="editCateForm.imgsrc"
							:src="
								editCateForm.imgsrc
									? 'http://localhost:8000/' + editCateForm.imgsrc
									: defaultImg
							"
							class="avatar"
						/>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editCategoryVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('editCateRef')">修 改</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
//import <组件名称> from '<组件路径>';
import defaultImg from '@/assets/logo.png';
import {
	categoryDeleteApi,
	categoryEditStatusApi,
	categoryByIdApi,
	categoryEditApi,
} from '@/api/category.js';
export default {
	//注册import导入的组件
	components: {},
	//数据
	data() {
		return {
			defaultImg,
			editCategoryVisible: false,
			editCateForm: {
				pid: '',
				title: '',
				imgsrc: '',
			},
			editCateRules: {
				title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
				pid: [{ required: true, message: '请选择分类' }],
			},
			cascaderProp: {
				checkStrictly: true,
				label: 'title',
				value: 'cid',
				children: 'children',
			},
		};
	},
	//计算属性
	computed: {
		categoryList() {
			return this.$store.state.category.categoryList;
		},
	},
	//侦听器
	watch: {},
	//方法
	methods: {
		// 编辑方法
		async handleEdit(cid) {
			if (cid == 0) return this.$message.error('根分类不可修改');
			this.editCategoryVisible = true;
			try {
				const result = await categoryByIdApi(cid);
				this.editCateForm.pid = result.data.data.data.pid;
				this.editCateForm.title = result.data.data.data.title;
				this.editCateForm.imgsrc = result.data.data.data.imgsrc;
				this.editCateForm.cid = result.data.data.data.cid;
				console.log(result.data.data.data);
			} catch (error) {
				this.$message.error('该用户信息查找失败');
			}
		},
		// 删除方法
		handleDelete(cid) {
			if (cid == 0) return this.$message.error('根分类不可修改');
			this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					try {
						await categoryDeleteApi(cid);
						this.$message({
							type: 'success',
							message: '删除成功!',
						});
						this.$store.dispatch('saveCategoryList');
					} catch (error) {
						this.$message.error(error.response.data.meta.message);
						return false;
					}
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
		// 修改状态
		async changeIsShow(cid, $event) {
			if (cid == 0) return this.$message.error('根分类不可修改');
			try {
				await categoryEditStatusApi(cid, $event ? '1' : '0');
				this.$message.success('修改成功');
			} catch (error) {
				this.$message.error('修改失败');
			}
		},
		// 关闭修改按钮
		clockHandle() {
			// 清空上传图片
			this.$refs['cateUploadRef'].clearFiles();
			this.editCateForm.imgsrc = '';
			// 清空表单
			this.$refs['editCateRef'].resetFields();
		},
		// 提交用户修改
		submitForm(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					// console.log(this.editCateForm);
					try {
						await categoryEditApi(this.editCateForm);
						this.$store.dispatch('saveCategoryList');
					} catch (error) {
						// console.log(error);
						this.$message.error(error.response.data.meta.message);
						return false;
					}
					this.editCategoryVisible = false;
				} else {
					this.$message.error('信息填写不完整');
					return false;
				}
			});
		},
		// 级联选择器发生改变
		cascaderChange(value) {
			this.editCateForm.pid = value[value.length - 1];
		},
		// 头像事件
		handleAvatarSuccess(response) {
			this.editCateForm.imgsrc = response.data.data.path;
		},
		handleAvatarRemove() {
			this.editCateForm.imgsrc = '';
		},
	},
	created() {
		this.$store.dispatch('saveCategoryList');
	},
};
</script>
<style></style>
